import { defineStore } from 'pinia';
import { reactive, toRefs, watch } from 'vue';
import { LocalStorage, useQuasar } from 'quasar';

export type ThemeType = 'dark' | 'light' | 'system';
export interface SettingState {
  theme: ThemeType;
  themeColor: string;
  tagsView: boolean; // 显示标签栏
  fixedHeader: boolean; // 固定页头
  sidebarLogo: boolean; // 显示侧边LOGO
  errorLog: boolean; // 显示错误日志
}
// 默认配置
const defaultSettings: SettingState = {
  theme: 'light',
  themeColor: '#1976d2',
  tagsView: true,
  fixedHeader: true,
  sidebarLogo: true,
  errorLog: true,
};

const settingStoreKey = 'setting@fn-admin-quasar';
export const useSettingStore = defineStore('setting', () => {
  defaultSettings.tagsView = useQuasar().screen.gt.xs;
  // state
  // 从本地存储中获取保存的配置值，如果没有取默认值
  const state = reactive<SettingState>(LocalStorage.getItem<SettingState>(settingStoreKey) || defaultSettings);

  // 改变后保存到localstorage
  watch(state, (val) => LocalStorage.set(settingStoreKey, val));

  // 重置
  const reset = () => Object.assign(state, defaultSettings);

  // 返回state
  return { ...toRefs(state), reset };
});
